<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Leaderboard</title>
<meta name="cloudcaptive" content=
"CloudCaptive.com UserInfuser">
<style type="text/css">
   .title {background-color:{{titleBackgroundColor}}; text-align:{{titleFloat}}; padding:3px; font-family:{{titleFont}}; font-size:{{titleSize}}px; color:{{titleColor}}; }
   .header {background-color:{{headerBackgroundColor}}; font-family:{{headerFont}}; font-size:{{headerSize}}px; color:{{headerColor}}; }
   .name { font-family:{{nameFont}}; font-size:{{nameSize}}px; color:{{nameColor}}; }
  .avatar { border-radius: 5px 5px 5px 5px; }
  .inline { display: inline-block; }
  .middle { text-align: center; vertical-align: middle;}
  .even { background-color: {{backgroundColor}}; 
          }
  .odd { background-color: {{alternateColor}};
         }
  .bborder { border-bottom: 1px solid #D3D4D9; }
  .bborder1 { border-bottom: 1px solid #D3D4D9; }
  .avcell {padding-top: 8px; padding-bottom: 8px; padding-left: 10px; padding-right: 5px;}
  .avtext {padding-left: 10px; padding-right: 5px; }
  .table {overflow:hidden; width:{{width}}; border-collaspe: collaspe; border-spacing: 0px;}
  .users {padding-left: 25px;}
  .points {text-align: middle; }
  .rank {text-align: middle;}
  a:link {text-decoration:none;}
  a:visited {text-decoration:none;}
  a:hover {text-decoration:none;}
  a:active {text-decoration:none;}
</style> 
</head>
<body>
<div style="background-color:{{backgroundColor}}; 
{% if hasRoundedCorners %}
border-radius: 10px 10px 10px 10px;
{% endif %}
visibility: visible; border:{{borderThickness}}px {{borderStyle}} {{borderColor}}; height:{{height}}px; width:{{width}}px; overflow:hidden; ">
  {% if displayTitle %}
    <div class="title" style="">{{ title }}</div>
  {% endif %}


  {% if users %}
    <table width="{{width}}px" cellspacing="0" border="0" rules="">
    <tbody>
  {% if displayHeader%}
             <tr class="bborder even header" >
                <td class="users" >User</td>
                <td align="center"  class="rank" >Rank</td>
                <td align="center"  class="points" >Points</td>
             </tr>
  {% endif %} 
  {% for user in users %}
      <tr class="bborder {% if forloop.counter|divisibleby:2 %}even{% else %}odd{% endif %}">

           <td class="avcell">
             <table>
              <tr>
               <td width="{{imageSize}}">     
                {% if user.profileLink %}
                <a href="{{user.profileLink}}" target="_blank">
                {% endif %}

                <img class="avatar" style="border-style:none;" height="{{imageSize}}px" width="{{imageSize}}px" src=
                    {% if user.profileImg %}
                      "{{user.profileImg}}"
                    {% else %}
                      "http://i.imgur.com/cXhDa.png"  
                    {% endif %}
                    alt="{{user.profileName}} Profile">
{% if user.profileLink %}</a>
                {% endif %}
               </td>
               <td class="avtext name">
                {% if user.profileLink %}
                <a href="{{user.profileLink}}" target="_blank">
                {% endif %}
                {{ user.profileName }} 
{% if user.profileLink %}</a>
                {% endif %}
               </td>
              <tr>
             </table>
          <td align="center" style="font-family:{{pointsFont}}; font-size:{{pointsSize}}px; color:{{pointsColor}};">
            {{ forloop.counter }}<br>
          </td>

          <td align="center"  class=""  width=""  style="font-family:{{rankFont}}; font-size:{{rankSize}}px; color:{{rankColor}};">
            {{ user.points }}<br>
          </td>
      </tr>
    {% endfor %}
    </tbody>
    </table>
  {% else  %}
    {% if displayNoUserMessage%}
      <div class="middle inline" style="float:{{noUserFloat}}; font-family:{{noUserFont}}; font-size:{{noUserSize}}px; text-align:{{noUserFloat}}; color:{{noUsesColor}};">
        {{noUserMessage}}
      </div>
    {% endif %}
  {% endif %}
</div>
</body>
